<template>
  <div class="emoji-container">
    <!-- 表情按钮 -->
    <slot>
      <el-button
        :icon="ChatLineRound"
        circle
        @click="toggleEmoji"
        :type="value ? 'primary' : ''"
        class="emoji-trigger"
      />
    </slot>

    <!-- 表情面板 -->
    <div v-if="showPanel" class="emoji-panel">
      <div class="emoji-header">
        <span>选择表情</span>
        <el-button :icon="Close" size="small" text @click="closePanel" />
      </div>

      <!-- 表情网格 -->
      <div class="emoji-content">
        <div class="emoji-grid">
          <div
            v-for="emoji in emojis"
            :key="emoji.code"
            @click="handleClick(emoji.code)"
            class="emoji-item"
            :title="emoji.title"
          >
            <img
              :src="'/images/emoji/' + emoji.file"
              :alt="emoji.title"
              class="emoji-image"
            />
          </div>
        </div>
      </div>

      <!-- 最近使用的表情 -->
      <div v-if="recentEmojis.length > 0" class="recent-emojis">
        <div class="recent-title">
          <el-text size="small" type="info">最近使用</el-text>
        </div>
        <div class="emoji-grid recent-grid">
          <div
            v-for="emoji in recentEmojis"
            :key="emoji.code"
            @click="handleClick(emoji.code)"
            class="emoji-item recent-item"
            :title="emoji.title"
          >
            <img
              :src="'/images/emoji/' + emoji.file"
              :alt="emoji.title"
              class="emoji-image"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ChatLineRound, Close } from '@element-plus/icons-vue'

export default {
  name: 'Emoji',
  props: ['modelValue'],
  emits: ['update:modelValue', 'update'],
  data() {
    return {
      showPanel: false,
      recentEmojis: [],
      ChatLineRound,
      Close
    }
  },
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    },

    emojis() {
      console.log('表情数据:', this.state.emojis)
      return this.state.emojis || []
    }
  },

  methods: {
    toggleEmoji() {
      console.log('切换表情面板，当前值:', this.showPanel)
      this.showPanel = !this.showPanel
      console.log('切换后的值:', this.showPanel)
      // 同时更新父组件的v-model
      this.$emit('update:modelValue', this.showPanel)
    },

    closePanel() {
      this.showPanel = false
      this.$emit('update:modelValue', false)
    },

    handleClick(code) {
      // 添加到最近使用
      this.addToRecent(code)

      // 发送表情代码
      this.$emit('update', code)

      // 关闭表情面板
      this.closePanel()
    },

    addToRecent(code) {
      const emoji = this.emojis.find(e => e.code === code)
      if (!emoji) return

      // 移除已存在的相同表情
      this.recentEmojis = this.recentEmojis.filter(e => e.code !== code)

      // 添加到开头
      this.recentEmojis.unshift(emoji)

      // 限制最近使用的数量
      if (this.recentEmojis.length > 20) {
        this.recentEmojis = this.recentEmojis.slice(0, 20)
      }

      // 保存到本地存储
      localStorage.setItem('recentEmojis', JSON.stringify(this.recentEmojis))
    }
  },

  mounted() {
    // 加载最近使用的表情
    const saved = localStorage.getItem('recentEmojis')
    if (saved) {
      try {
        this.recentEmojis = JSON.parse(saved)
      } catch (e) {
        console.error('加载最近使用表情失败:', e)
      }
    }
  }
}
</script>

<style scoped>
/* 表情容器 */
.emoji-container {
  position: relative;
  display: inline-block;
}

.emoji-trigger {
  transition: all 0.2s ease;
}

.emoji-trigger:hover {
  transform: scale(1.1);
}

/* 表情面板 */
.emoji-panel {
  position: fixed;
  bottom: 140px;
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  max-height: 320px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--el-border-color-light);
  z-index: 1000;
  overflow: hidden;
}

/* 表情头部 */
.emoji-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid var(--el-border-color-lighter);
  font-weight: 500;
  color: var(--el-text-color-primary);
}

/* 表情内容 */
.emoji-content {
  padding: 16px;
  max-height: 240px;
  overflow-y: auto;
}

/* 表情网格 */
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}

.emoji-item {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.emoji-item:hover {
  background: var(--el-color-primary-light-9);
  transform: scale(1.2);
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.emoji-item:active {
  transform: scale(1.1);
}

.emoji-image {
  width: 24px;
  height: 24px;
  object-fit: contain;
  transition: all 0.2s ease;
}

.emoji-item:hover .emoji-image {
  width: 28px;
  height: 28px;
}

/* 最近使用区域 */
.recent-emojis {
  border-top: 1px solid var(--el-border-color-lighter);
  padding: 12px 16px;
  background: #fafafa;
}

.recent-title {
  margin-bottom: 8px;
}

.recent-grid {
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
}

.recent-item {
  width: 28px;
  height: 28px;
  background: white;
  border: 1px solid var(--el-border-color-extra-light);
}

.recent-item:hover {
  background: var(--el-color-primary-light-8);
  border-color: var(--el-color-primary-light-6);
}

.recent-item .emoji-image {
  width: 18px;
  height: 18px;
}

.recent-item:hover .emoji-image {
  width: 20px;
  height: 20px;
}

/* 自定义滚动条 */
.emoji-content::-webkit-scrollbar {
  width: 6px;
}

.emoji-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.emoji-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.emoji-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .emoji-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .recent-grid {
    grid-template-columns: repeat(8, 1fr);
  }
}
</style>

